<template>
  <div class="sch_con_container">
    <p>高校查询⇩</p>
    <div class="condition_container">
      <p>请选择搜索条件:</p>
      <span>院校所属:</span>
      <select name="" id="" @change="handProvince">
        <option
          :value="getprovince(index)"
          v-for="(items, index) in schprovince"
          :key="index"
        >
          {{ items.province }}
        </option>
      </select>
      <span>院校特色:</span>
      <select name="" id="" @click="handSchstate">
        <option
          :value="getschstate(index1)"
          v-for="(items, index1) in schstate"
          :key="index1"
        >
          {{ items.schstate }}
        </option>
      </select>
      <br />
      <span>院校类型:</span>
      <select name="" id="" @click="handSchstyle">
        <option
          :value="getschstyle(index2)"
          v-for="(items, index2) in schstyle"
          :key="index2"
        >
          {{ items.schstyle }}
        </option>
      </select>
      <span>办学类型:</span>
      <select name="" id="" @click="handSchattr">
        <option
          :value="getschattr(index3)"
          v-for="(items, index3) in schattr"
          :key="index3"
        >
          {{ items.schattr }}
        </option>
      </select>
      <div class="sch_search">
        <span>请输入学校关键字:</span>
        <label for="请输入学校关键字">
          <input
            type="text"
            name=""
            id="school"
            placeholder="请输入学校关键字"
          />
        </label>
      </div>
      <input type="button" value="查询" id="sch_commit" />
    </div>
  </div>
</template>

<script>
import { get } from 'animejs'
import { request } from '../../../network/axios'
export default {
  name: 'schcondition',
  data() {
    return {
      schprovince: [], //省份
      schstate: [],   //院校特色
      schstyle: [],    //院校类型
      schattr: [],     //办学类型
      submit: {
        province: '',  //省份
        schType: '',    //院校类型
        banxueType: '',  //办学类型
        is985: '',       // 院校特色
        is211: ''
      }
    }
  },
  methods: {
    getprovince(index) {
      return this.schprovince[index].province
    },
    getschstate(index1) {
      return this.schstate[index1].schstate
    },
    getschstyle(index2) {
      return this.schstyle[index2].schstyle
    },
    getschattr(index3) {
      return this.schattr[index3].schattr
    },
    handProvince(e) {
      // 绑定了province
      this.submit.province = e.target.value
      // console.log(e.target.value)
    },
    handSchstate(e) {
      this.submit.is985 = e.target.value
      // console.log(this.submit.is985)
    },
    handSchstyle(e) {
      this.submit.schType = e.target.value
      console.log(this.submit.schType)
    },
    handSchattr(e) {
      this.submit.banxueType = e.target.value
      console.log(this.submit.banxueType)
    }
  },
  created() {
    request({
      url: '/schoolquery/schcondition',
      type: 'get'
    }).then(res => {
      this.schstate = res.data[0].schstate
      // console.log(this.schstate[0].schstate)
      this.submit.is985 = this.schstate[0].schstate
      // console.log(this.submit.is985)
      this.schattr = res.data[0].schattr
      this.submit.banxueType = this.schattr[0].schattr
      // console.log(this.submit.banxueType)
      this.schstyle = res.data[0].schstyle
      this.submit.schType = this.schstyle[0].schstyle
      // console.log(this.submit.schType)
      this.schprovince = res.data[0].schprovince
      this.submit.province = this.schprovince[0].province
      // console.log(this.submit.province)
      // console.log(res.data[0].schattr);
    }).catch(err => {
      console.log(err);
    })
  }
}
</script>

<style scoped>
.sch_con_container {
  height: 350px;
  width: 1200px;
  /* border: 1px solid; */
  border-radius: 10px;
  padding: 10px;
  margin: 40px auto;
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}
.sch_con_container > p {
  margin: 20px 60px;
  font-family: "xin";
  font-size: 22px;
  color: rgba(16, 110, 79, 0.945);
}
.condition_container {
  height: 80%;
  width: 90%;

  margin: 5px auto;
  padding-top: 1px;
}
.condition_container > p {
  font-weight: 600;
  margin: 15px;
  font-size: 19px;
  color: rgba(210, 105, 30, 0.712);
}
.condition_container select {
  background-color: rgba(170, 163, 163, 0.287);
  font-size: 15px;
  margin-left: 10px;
  margin-top: 30px;
}
.condition_container > span {
  margin-left: 35px;
  font-size: 18px;
  font-weight: 600;
}
.sch_search {
  margin: 15px;
  margin-left: 35px;
  font-size: 18px;
  padding-top: 10px;
}
.sch_search span {
  font-weight: 600;
  margin-top: 40px;
}
.sch_search input {
  font-size: 15px;
  height: 20px;
  width: 300px;
}
#sch_commit {
  position: relative;
  width: 100px;
  height: 50px;
  left: 740px;
  top: -100px;
  font-size: 20px;
  font-family: "xin";
  color: brown;
  background-color: rgba(34, 153, 200, 0.746);
  border-radius: 5px;
  transition: all linear 0.3s;
  border: none;
}
#sch_commit:hover {
  background-color: rgba(19, 161, 50, 0.767);
  transform: scale(1.1);
}
select {
  border-radius: 5px;
}
#school {
  border: 1px solid burlywood;
  border-radius: 5px;
  height: 30px;
}
</style>